<template>
  <Card class="info-card-wrapper" :padding="0" style="overflow: visible">
    <div class="content-con" style="height: 100%;display: flex;flex-direction: column">
      <div class="baseCount">
        <span >
          <count-to :style="{color:this.para.infor.color}" :end="this.para.infor.count"></count-to>
        </span>
      </div>
      <div class="baseName">
        <span>{{ baseData.name }}({{baseData.unit}})</span>
      </div>
<!--      <div class="baseFooter">-->
<!--        <div class="status_div"></div>-->
<!--        <div class="line-1">-->
<!--          <div class="line"></div>-->
<!--        </div>-->
<!--        <div class="line-2">-->
<!--          <div class="line"></div>-->

<!--        </div>-->
<!--        <div class="line-3">-->
<!--          <div class="line"></div>-->

<!--        </div>-->
<!--        <div class="status_div"></div>-->
<!--      </div>-->
    </div>
  </Card>
</template>

<script>
  import CountTo from '_c/count-to'

export default {
  name: 'BaseCard',
  components: {
    CountTo
  },
  props: {
    para:{},
  },
  computed: {
  },
  data() {
    return{
      baseData:this.para.infor,
      baseIndex:this.para.i
    }
  },
  methods:{
    judgeSize(v){
      if(v>1024){
        return true
      }
      return false
    }
  },
  watch:{
    'baseData.count':function () {
      if((this.baseIndex=='2' || this.baseIndex=='3') && this.judgeSize(this.baseData.count)){
        this.baseData.unit='GB'
      }
    }
  }
}
</script>

<style lang="less">
  .baseCount {
    /*flex-grow: 1;*/
    flex-basis: 60%;
    color: #AAE3FF;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .baseName {
    flex-basis: 25%;
    color: #00AEFF;
    font-size: .5rem;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .baseFooter{
    flex-basis: 15%;
    display: flex;
    div.status_div{
      /*flex-basis: 32%;*/
      flex-grow: 1;
    }
    .line-1 {
      flex-basis: 0.4vw;
      position: relative;

      .line {
        transform: rotateZ(-45deg) scale(1.414);
        transform-origin: left;
      }
    }
    .line-2{
      position: relative;
      flex-grow: 1;
      .line{
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: 0.3vw;
        border-bottom: 2px solid black;
      }
    }
    .line-3{
      flex-basis: 0.4vw;
      position: relative;
      .line{
        transform: rotateZ(45deg) scale(1.414);
        transform-origin: right;
      }
    }
    .line-1 .line,.line-3 .line{
      left: 0;
      right: 0;
      bottom: -1px;

    }
    .line{
      position: absolute;
      border-bottom: 2px solid black;
      opacity: 0.5;
      border-radius:2px ;
    }
  }
.size{
  width: 100%;
  height: 100%;
}

.info-card-wrapper{
  height: 100%;
  border: none !important;
  .ivu-card-body{
    .size;
  }
  .content-con{
    position: relative;

    background:linear-gradient(180deg, rgba(13,26,47,0.00) 0%, rgba(0,174,255,0.30) 99%);
    border-radius: 8px;

  }
}
</style>
